<template>
    <el-dialog :visible.sync="visible" v-if="visible"  :title="formData.newsId ? '编辑资讯' : '新增资讯'"  top="20px" width="1200px" :close-on-click-modal="false">

        <el-form ref="ruleForm" :model="formData" :inline="false" :rules="rules" label-width="0" class="demo-ruleForm">
            <el-row :gutter="20">
                <el-col :span="12">
                    <p class="form_required">标题</p>
                    <el-form-item prop="title">
                        <el-input v-model="formData.title" placeholder="请输入标题" size="medium" clearable>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <p class="form_required">状态</p>
                    <el-form-item prop="status">
                        <el-select clearable class="filter-item" :remote="true" v-model="formData.status" filterable
                            placeholder="请选择启用状态">
                            <el-option v-for="item in statusArr" :key="item.id" :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row :gutter="20">
                <el-col :span="24">
                    <p class="form_required">内容</p>
      <el-form-item prop="content">
        <tinymce ref="ty" v-model="formData.content" :height="300" />
      </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="visible = false">取 消</el-button>
            <el-button type="primary" @click="confirm(true)" :loading="submitLoading">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import Tinymce from '@/components/Tinymce'
import { uploadFile } from '@/api/admin.js'
import { getInfoById, add } from '@/api/web/news'
export default {
    components: {
        Tinymce,
    },
    data() {
        return {
            submitLoading: false,
            loading: false,
            formData: {},
            cover_loading: false,
            videoUrl_loading: false,
            teacherPhotos: [],
            statusArr: [
                { label: '启用', value: 0 },
                { label: '停用', value: 1 },

            ],
            visible: false,
            rules: {
                videoUrl: [{
                    required: true,
                    message: '请上传一个视频'
                }],
                content: [{
                    required: true,
                    message: '请详细描述这个新闻吧~'
                }],
                status: [{
                    required: true,
                    message: '请选择状态'
                }],
                title: [{
                    required: true,
                    message: '标题不能为空'
                }]
            }
        }
    },
    mounted() {
        if (this.$route.query.id) {
            // this.getInfoById()
        }
        
        // this.$refs.ty.destroyTinymce()
        //   this.$refs.ty.initTinymce()
    },
    methods: {
        add() {
            this.edit({status:0})
        },
        edit(record) {
            this.visible = true
            this.formData = record
            if(record.newsId){
                this.getNewsDetail(record.newsId)
            }
        },
        search() {
            this.$refs.selectSchoolDialog.add()
        },
        uploadRequest(params, key) {
            this[`${key}_loading`] = true
            uploadFile(params).then(res => {
                this[`${key}_loading`] = false
                if (res && res.data && res.data.length) {
                    if (key === 'teacher') {
                        this.teacherPhotos.push(res.data[0])
                    } else {
                        this.$set(this.formData, key, res.data[0])
                    }
                }
            })
        },
        
        getNewsDetail(id) {
            this.loading = true
            getInfoById({ newsId: id }).then(res => {
                this.loading = false
                if (res.code == 200) {
                this.formData = res.data
                this.$nextTick(()=>{
                    this.$refs.ty.destroyTinymce()
                this.$refs.ty.initTinymce()
                })
                } else {
                this.$message({
                    type: 'error',
                    message: res.message
                })
                }
            })
        },
        /**
         * 保存
         */
        confirm(closeDialog) {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    add(this.formData).then(res => {
                        this.submitLoading = false
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '提交成功'
                            })
                            this.$emit('ok')
                            this.visible = false;
                        } else {
                            this.$message({
                                type: 'error',
                                message: res.message
                            })
                        }
                    })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },
    }
}
</script>
  
<style scoped>
.avatar-uploader,
.el-upload {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    width: 178px !important;
    height: 178px;
}

.avatar-uploader:hover,
.el-upload:hover {
    border-color: #409EFF;
}

.upload-text {
    font-size: 14px;
    color: #8c939d;
    line-height: 178px;
    text-align: center;
    margin: 0 auto;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}

.container {
    padding-bottom: 30px;
}

.t_img {
    display: inline-block;
    width: 178px;
    height: 178px;
    margin-right: 12px;
    margin-top: 12px;
}

.form_required::before {
    content: '*';
    color: red;
}
</style>
<style>
.demo-ruleForm .el-input,
.demo-ruleForm .el-select {
    width: 300px;
}

.el-dialog__header {
    border-bottom: 1px solid #e8e8e8;
}

.el-dialog__footer {
    padding: 20px !important;
    border-top: 1px solid #e8e8e8;
}
</style>
  